<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="test1" style="width:200px;height: 200px; border:1px solid #000;">test1:title</div>
<input type="checkbox" name="" id="test2">test2:checked checkbox <br>
<input type="radio" name="" id="test3">test:checked radio <br>
<select name="" id="test4">
    <option value="v1">test4-1</option>
    <option value="v2" selected>test4-2</option>
    <option value="v3">test4-3</option>
</select>
<ul id="list1">
    <!--comment1-->

    <li id="L1">test1<b>Test LastChild</b></li>
    <!--comment2-->
    <li id="L2">test2</li>
    <li id="L3">test3</li>
    <li id="L4">test4</li>
</ul>

<script type="text/javascript">
    (function (document, window) {
        function $(selector) {
            return new ln(selector);
        }

        function ln(selector) {
            if (typeof selector === 'string') {
                this.element = document.querySelector(selector);
            } else {
                this.element = selector;
            }
        }

        ln.prototype = {
            firstChild:function () {
                var node = this.element.firstElementChild;
                return $(node);
            },
            lastChild:function () {
                var node = this.element.lastElementChild;
                return $(node);
            }
        };
        window.$ = $;
    }(document, window));
    /*
     //调用可以这样：
     $('#test4').firstChild();
     链式：
     $('#list1').firstChild().lastChild();
     */
</script>


</body>
</html>